<template>
    <div class="wrap">
        <div class="wrap_left">
            <div class="title">
               <el-input v-model="text" placeholder="输入关键字查询" class="search-text"></el-input>
               <!-- <el-button size="mini" type="primary"  @click="handleAddNode">新增字典</el-button> -->
               <i class="el-icon-refresh refresh" @click="refresh"></i>
            </div>
            <el-tree
                v-loading="treeLoading"
                :data="treeData"
                :props="props"
                @node-click="onClickTree"
                highlight-current
                node-key="code"
                :filter-node-method="filterNode"
                ref="elTree"
            >
                <template #default="{  data }">
                    <span class="custom-tree-node">
                        <span>{{data.name}}【{{data.type}}】</span>
                        <!-- <span>
                            <i class="el-icon-edit edit-icon" title="编辑" @click="editNode(data)"></i>
                            <i class="el-icon-delete danger-textbtn"  title="删除" @click="removeNode(node, data)"></i>
                        </span> -->
                    </span>
                </template>
            </el-tree>
       </div>
       <div class="wrap_right">
            <Table
                :option="mixinOption" 
                :cloumn="cloumn"
                :searchForms="searchForm"
                :data="data"
                :loading="mixinLoading"
                :pageParams="mixinPageOption"
                @handleEdit="handleEdit"
                @handelSearchForm="handelSearchForm"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
                @handleAdd="handleAdd"
                @handelDelete="handelDelete">
            </Table>
       </div>
       <!-- <el-dialog  
            :title="title"
            v-model="nodeDialogVisible"
            width="30%"
            :close-on-click-modal="false"
            :before-close="handleCloseNode">
            <el-form
                ref="editForm"
                :rules="rules"
                :model="form"  
                label-width="120px" 
                label-position="left">
                <el-form-item label="字典名称：" prop="name">
                    <el-input v-model="form.name" placeholder="请输入字典名称"></el-input>
                </el-form-item>
                <el-form-item label="字典编码：" prop="code">
                    <el-input v-model="form.code" placeholder="请输入字典编码"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="remark">
                    <el-input type="textarea" :rows="3" v-model="form.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="handleCloseNode">取 消</el-button>
                <el-button type="primary" @click="handleSaveNode">确 定</el-button>
                </span>
            </template>
        </el-dialog> -->
        <add :dicType="dicType" @onChange="onChangeAdd" :type="type" :item="editItem" :visible="isAddShow"></add>
    </div>
</template>
<script>
import abcApi from '@/api/dataDictionary'
import add from './add.vue'

export default {
    name: 'index',
    components: {
        add
    },
    data() {
        return {
            // 树结构
            text: '',
            treeLoading: false,
            treeData: [],
            props: {
                children: 'children',
                label: 'name',
            },
            defaultExpandedKeys: '',
            // 表格
            mixinOption: {
                handleWidth: 250,
                page: false,  // 开启分页
                index: true, // 开启索引
                indexTitle: '序号',
                selection: false,  // 多选
                addShow: true,  // 新增按钮
                border: true, // 开启边框,
                handleRowShow: true, //操作栏
                searchBtnShow: false, // 搜索按钮
                emptyBtnShow: false, // 表头清空按钮
                searchHeader: true, // 是否展示搜索表头
                stripe: true,  // 斑马纹
                rowKey: 'id', // 表格树标识符
                treeChildren: '', // 表格树子集字段
                viewBtnHide: true
            },
            data: [],
            cloumn: [
                {
                    prop: 'value',
                    label: '名称',
                },
                {
                    prop: 'code',
                    label: '编码',
                },
                {
                    prop: 'orderNum',
                    label: '排序'
                },
                {
                    prop: 'name',
                    label: '字典类型'
                },
                {
                    prop: 'remark',
                    label: '备注'
                },
            ],
            searchForm: {
                code: '',
            },
            // 新增编辑字典类型
            title: '',
            nodeDialogVisible: false,
            form: {},
            rules: {
                name: [
                    { required: true, message: '请输入字典名称', trigger: ['change','blur'], }
                ],
                code: [
                    { required: true, message: '请输入字典编码', trigger: ['change','blur'], }
                ]
            },
            // 新增编辑字典值
            isAddShow: false,
            dicType:{},//字典类型字典code
            editItem:{},
            type:'add',


        }
    },
    created() {
        this.getDicList()
    },
    watch: {
      text(val) {
        this.$refs.elTree.filter(val)
      },
    },
    methods: {
        getDicList() {
            this.treeLoading = true
            abcApi.findDict().then(res => {
                console.log(res.data)
                this.treeData = res.data
                this.searchForm.dictType = res.data[0].type
                this.dicType = res.data[0]
                this.$nextTick(function(){//默认选中的节点
                    this.$refs.elTree.setCurrentKey( this.searchForm.code );
                })
                this.getData()
                this.treeLoading = false
            }).catch(()=>{
                this.treeLoading = false
            })
        },
        getData() {
            this.mixinLoading = true 
            abcApi.getTableData({...this.mixinPageOption, ...this.searchForm})
                .then(res => {
                    this.mixinLoading = false
                    this.data = res.data
                    this.mixinPageOption.total = res.data.length
                })
                .catch(() => {
                    this.mixinLoading = false
                })
        },
        // 过滤搜索节点
        filterNode(value, data) {
            console.log(data)
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        onClickTree(data){
          this.searchForm.dictType = data.type
          this.dicType = data
          this.getData()
        },
        refresh() { // 刷新节点、列表(重置节点选择)
            this.text = ''
            this.getDicList()
        },
        // 新增编辑字典类型
        handleAddNode() {
            this.form = {},
            this.nodeDialogVisible = true
            this.title = '新增字典'
        },
        handleCloseNode() { // 关闭新增节点弹框
            this.$refs['editForm'].resetFields()
            this.nodeDialogVisible = false
        },
        
        editNode(data) {// 打开编辑节点弹框
            this.nodeDialogVisible = true
            this.title = '编辑字典'
            abcApi.getNodeDetail({id: data.id})
                .then(res => {
                    this.form = res.data
                })
        },
        handleSaveNode() { // 保存节点
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                    var Api = (this.title == '新增字典' ? abcApi.saveDictMain : abcApi.updateDictMain )
                    Api(this.form).then(res => {
                        this.$message.success('新增成功')
                        this.nodeDialogVisible = false
                        this.getDicList()
                        this.$refs['editForm'].resetFields()
                    })
                } else {
                    return false
                }

            })
            
        },
        // 新增编辑字典类型

        // 删除节点
        // removeNode(node, data) {
        //     this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //         }).then(() => {
        //             abcApi.delNodeData({id: data.id})
        //                 .then(res => {
        //                     this.$message.success(res.message)
        //                     this.getDicList()
        //                 })
        //         }).catch(() => {})
        // },

        // 类型值新增编辑
        handleAdd(){
            this.isAddShow = true
            this.type = 'add'
            this.editItem = {}
        },
        onChangeAdd(data){
            this.isAddShow = data.bool
            if(data.refresh){
              this.getData()
            }
        },
        handleEdit(item){
            this.isAddShow = true
            this.type = 'edit'
            this.editItem = item
        },
        handelDelete(row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    abcApi.deleteDict(
                        {id:row.id}
                    )
                    .then(() => {
                        this.$message.success('删除成功')
                        this.getData()
                    })
                    .catch((err) => {
                        this.$message.success(err.message)  
                    })
                }).catch(() => {})
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap {
    display: flex;
    height: 100%;
    .wrap_left {
        width: 300px;
        // flex-shrink: 0;
        background-color: #fff;
        margin-right: 20px;
        padding: 10px;
        ::v-deep .el-tree-node__content{
            // height: 30px;
            padding: 10px 0;
        }
        .el-tree {
            height: calc(100% - 40px);
            overflow-y: auto;
        }
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            .search-text {
                width: 130px;
            }
        }
    }
    .wrap_right {
        width: calc(100% - 290px);
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    .edit-icon {
        color: #0096FF;
        display: inline-block;
        margin: 0 5px;
    }
    .node-icon {
        display: inline-block;
        margin: 0 5px;
    }
    .refresh {
        cursor: pointer;
        color: #0096FF;
    }
}
</style>